<template>
  <div class="OT-delay" v-loading="loading" element-loading-text="加载中。。。">
    <div>
      <el-card style="margin-bottom:10px;overflow: visible;">
        <el-form ref='queryForm' :model='queryForm' size='mini' label-position='top'>
          <el-row :gutter="10">
            <el-col :lg="4" :md="6">
              <el-form-item label="机构名称" prop="BRANCHNO">
                <select-tree :tree-data="treedata" :branch="queryForm.branchName" @getBranchName="getBranch"></select-tree>
              </el-form-item>
            </el-col>
            <el-col :md="4" :lg="4">
              <el-form-item label="加班编号" prop="OTID">
                <el-input v-model.trim='queryForm.OTID' placeholder="请输入加班编号" maxlength="10"></el-input>
              </el-form-item>
            </el-col>
            <el-col :md="4" :lg="4">
              <el-form-item label='加班名称' prop='OTNAME'>
                <el-input v-model.trim='queryForm.OTNAME' placeholder="请输入加班名称" maxlength="60"></el-input>
              </el-form-item>
            </el-col>
            <el-col :md="4" :lg="4">
              <el-form-item label='活动类型' prop='ACTIVITYTYPE'>
                <el-select v-model='queryForm.ACTIVITYTYPE' clearable placeholder="请选择活动类型">
                  <el-option v-for="item in actOptions" :key="item.ACTIVITYTYPE" :label="item.ACTIVITYTYPENAME"
                    :value="item.ACTIVITYTYPE"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :md="8" :lg="12" class="searchBtnMarginTop">
              <el-button type='primary' size='mini' icon='el-icon-search' @click="queryModel('search')">查询</el-button>
            <!-- </el-col>
            <el-col :md="3" :lg="2" class="searchBtnMarginTop"> -->
              <el-button type='warning' size='mini' icon='el-icon-refresh' @click="clearForm('queryForm')">重置</el-button>
            <!-- </el-col>
            <el-col :md="3" :lg="2" class="searchBtnMarginTop"> -->
              <el-button type='primary' size='mini' icon='el-icon-plus' @click="openPop('add')">新增加班</el-button>
            </el-col>
          </el-row>
        </el-form>
        <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName"
          @selection-change="tableCheckBoxChange" ref="multipleTable"
          :row-key="getRowKeys" :expand-row-keys="expands">
          <el-table-column prop="EVENT" type="expand">
            <template slot-scope="scope" v-if="scope.row.EVENT.length!=0">
              <el-table :data="scope.row.EVENT" :header-cell-style="tableHeaderStyle" :row-class-name="eventRowClassName">
                <el-table-column prop="CLASSESEVENTID" label="班次事件编号" width="120"></el-table-column>
                <el-table-column prop="CLASSESEVENTNAME" label="班次事件名称" width="120"></el-table-column>
                <el-table-column prop="ACTIVITYTYPE" label="活动类型"></el-table-column>
                <el-table-column prop="HOURS" label="时长"></el-table-column>
                <el-table-column label="开始时间类型" prop="SRTTIMETYPE" width="120">
                  <template slot-scope="scope">
                    <span>{{scope.row.SRTTIMETYPE === "0"?"绝对时间":(scope.row.SRTTIMETYPE === "1"?"相对于班次开始时间":(scope.row.SRTTIMETYPE === "2"?"相对于班次结束时间":"任意时间"))}}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="EARLIESTSRTTIME" label="最早开始时间"></el-table-column>
                <el-table-column prop="LATESTSRTTIME" label="最晚开始时间"></el-table-column>
                <el-table-column prop="ISPAID" label="是否带薪">
                  <template slot-scope="scope">
                    <span>{{scope.row.ISPAID === "1"?"是":"否"}}</span>
                  </template>
                </el-table-column>
                <el-table-column label="最少次数" prop="MINTIMES" width="100"></el-table-column>
                <el-table-column label="最多次数" prop="MAXTIMES" width="100"></el-table-column>
                <el-table-column prop="NOTES" label="说明"></el-table-column>
              </el-table>
            </template>
          </el-table-column>
          <el-table-column prop="OTID" label="加班编号" width="110" align="center"></el-table-column>
          <el-table-column prop="OTNAME" label="加班名称" align="center"></el-table-column>
          <el-table-column prop="ACTIVITYTYPE" label="活动类型编号" width="110" align="center"></el-table-column>
          <el-table-column prop="ACTIVITYTYPENAME" label="活动类型名称" width="110" align="center"></el-table-column>
          <el-table-column prop="NOTES" label="说明" align="center"></el-table-column>
          <el-table-column prop="HOURS" label="时长" align="center"></el-table-column>
          <el-table-column prop="MININTERVAL" label="最小时间间隔" width="110" align="center"></el-table-column>
          <el-table-column prop="MAXINTERVAL" label="最大时间间隔" width="110" align="center"></el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" content="修改" placement="top">
                <el-button type="text" @click="openPop('edit',scope.row)">
                  <i class="el-icon-edit"></i>
                </el-button>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="删除" placement="top">
                <el-button type="text" @click="openPop('del',scope.row)">
                  <i class="el-icon-delete"></i>
                </el-button>
              </el-tooltip>
              <!-- <el-tooltip class="item" effect="dark" content="查看关联班次事件详情" placement="top" v-if="scope.row.CLASSESEVENTIDLIST">
                <el-button type="text" @click="openPop('detail',scope.row)">
                  <i class="el-icon-search"></i>
                </el-button>
              </el-tooltip> -->
            </template>
          </el-table-column>
        </el-table>
        <div class="box">
          <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page.sync="currentPage" :page-sizes="[10, 20, 50,100]" :page-size="pageSize"
            layout="sizes, total, prev, pager, next, jumper" :total="tableTotal">
          </el-pagination>
        </div>
      </el-card>
    </div>
    <!-- 弹窗 -->
    <component :title="popTitle" :type="PopType" :is="dialogList.addOrEditOT" :rowData="addForm"
      :option="dialogQueryBat" :actOptions="actOptions" :treedata ="treedata"></component>
  </div>
</template>

<script>
  import getGlobalParams from "@/common/utils/getGlobalParams";
  import selectTree from "@/components/selectTree5/";
  //通讯相关
  import requestWFM from "@/common/utils/requestWFM";
  import queryOTDelay from '@/message/wfm/scheduleDataManage/OTDelayManage/queryOTDelay';
  import delOTDelay from '@/message/wfm/scheduleDataManage/OTDelayManage/delOTDelay';
  import ActivityQuery from '@/message/wfm/scheduleDataManage/activityManage/actQuery';
  // 弹窗组件
  import addOrEditOT from './dialog/addOrEditOT';
  import branchQuery from '@/message/wfm/baseData/branchManage/branchQuery'
  export default {
    components: { selectTree },
    data() {
      return {
        defaultProps: {
          children: 'children',
          label: 'BRANCHNAME'
        },
        popoverShow: false,
        resData: "",
        treedata: [],
        actOptions: [], //活动类型
        loading: false,
        popTitle: "新增加班",
        tableData: [],
        currentPage: 1,
        pageSize: getGlobalParams.get("PageSize"),
        tableTotal: 0,
        PopType: "",
        addForm: {
          OTID: "",
          OTNAME: "",
          ACTIVITYTYPE: "",
          ACTIVITYTYPENAME: "",
          NOTES: "",
          MININTERVAL: "",
          MAXINTERVAL: "",
          CLASSESEVENTIDLIST: "",
          branchNO:this.$store.getters.BranchNum,
          branchName: this.$store.getters.BranchName
        },
        queryForm: {
          OTID: '',
          OTNAME: '',
          ACTIVITYTYPE: '',
          branchNO:this.$store.getters.BranchNum,
          branchName: this.$store.getters.BranchName
        },
        //按钮可选标识符
        dialogList: {
          addOrEditOT,
        },
        dialogQueryBat: {
          isShow: false,
        },
        getRowKeys(row) {
          return row.OTID;
        },
        expands: [],
      }
    },
    methods: {
       getBranch(data) {
        // console.log(data)
        this.queryForm.branchName = data.BRANCHNAME
        this.queryForm.branchNO = data.BRANCHNO
        // this.ruleForm.branchNO = data.BRANCHNO
        this.popoverShow = false
        // this.nodeclick = data.GroupName
        // this.queryGroupId = data.GroupId
        // if (!data.children) {
        //   this.quesTypeName = data.GroupName
        //   this.ruleForm.typeId = data.GroupId //获取到问题分类的groupId
        //   this.queryModel()
        //   this.popoverShow = false
        // } else if (data.GroupId == '1') {
        //   this.ruleForm.typeId = data.GroupId
        //   this.queryGroupId = ''
        //   this.nodeclick = ''
        //   this.quesTypeName = data.GroupName
        //   this.queryModel()
        // } else {
        //   this.nodeclick = ''
        // }
      },
      // 活动查询
      async actQuery() {
        let resBody = new ActivityQuery()
        resBody.data.ACTIVITYCATEG = '03'   //查询加班活动类型
        resBody.data.CurrPage = 1;
        resBody.data.PageRowNum = 20;
        let response = await requestWFM(resBody);
        if (response.SYS_HEAD.ReturnCode == "000000") {
          this.actOptions = response.BODY.RSPSTRUCT
        } else {
          this.$message({
            type: "error",
            message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
          })
        }
      },
      clearForm(item) {
        this.$refs["" + item].resetFields();
      },
      async queryModel(data) {
        if (data) {
          this.currentPage = 1;
        }
        this.loading = true;
        let resBody = new queryOTDelay();
        resBody.data.BRANCHNO = this.queryForm.branchNO
        resBody.data.OTID = this.queryForm.OTID;
        resBody.data.OTNAME = this.queryForm.OTNAME;
        resBody.data.ACTIVITYTYPE = this.queryForm.ACTIVITYTYPE;
        resBody.data.PageFlag = '4';
        resBody.data.CurrPage = this.currentPage + "";
        resBody.data.PageRowNum = this.pageSize + "";
        let response = await requestWFM(resBody);
        this.loading = false;
        if (response.SYS_HEAD.ReturnCode == "000000") {
          this.tableData = response.BODY.RSPSTRUCT;
          this.tableTotal = response.BODY.TotalRowNum;
          this.NowPageNum = response.BODY.NowPageNum;
          this.queryForm.branchName = response.BODY.BRANCHNAME
          this.queryForm.branchNO = response.BODY.BRANCHNO
          this.tableData.forEach(item => {
            if (item.EVENT != 0) {
              this.expands.push(item.OTID)
            }
          });
        } else if (response.SYS_HEAD.ReturnCode == "ARBFQ001") {
          this.tableData = [];
          this.tableTotal = 0;
        } else {
          this.$message({
            type: "error",
            message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
          });
        }
      },
      openPop(type, row) {
        this.PopType = type;
        if (this.PopType == "add") { //新增
          this.popTitle = "新增加班"
          this.initPop();
          this.dialogQueryBat.isShow = true;
        } else if (this.PopType == "edit") { //编辑
          this.popTitle = "修改加班"
          this.initPop();
          this.dialogQueryBat.isShow = true;
          this.addForm = row;
          this.addForm.branchName = this.queryForm.branchName
          this.addForm.branchNO = this.queryForm.branchNO
        } else if (this.PopType == "del") { //删除
          this.delConfirm(row);
        } else {
          console.log("openPop 出错啦");
        }
      },
      delConfirm(row) {
        this.$confirm('确认删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.delOTDelay(row);
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      // 删除加班
      async delOTDelay(row) {
        this.loading = true;
        let resBody = new delOTDelay();
        resBody.data.OTID = row.OTID;
        let response = await requestWFM(resBody);
        this.loading = false;
        if (response.SYS_HEAD.ReturnCode == "000000") {
          this.queryModel();
          this.$message({
            type: "success",
            message: '删除成功'
          });
        } else {
          this.$message({
            type: "error",
            message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
          });
        }
      },
      handleSizeChange(val) {
        this.pageSize = val;
        this.queryModel();
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.queryModel();
      },
      tableCheckBoxChange() {

      },
      initPop() {
        this.addForm = {
        }
      },
      eventRowClassName(
        row,
        rowIndex
      ) {
        return 'success-row'
      },
      tableHeaderStyle({
        row,
        column,
        rowIndex,
        columnIndex
      }) {
        return 'background-color:#C1E0B8;'
      },
      tableRowClassName(
        row,
        rowIndex
      ) {
        // console.log(row.row.EVENT.length)
        return row.row.EVENT.length == 0 ? 'expand' : '';
      },
    },
    mounted() {
      this.queryModel();
      this.actQuery();
    },
  };

</script>


<style lang="scss">
.OT-delay{
  .expand .el-table__expand-column .cell {
    display: none;
  }

  .el-table .warning-row {
    background: #e4e1e1;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }

}
</style>
<style lang="scss" scoped>
  .box {
    margin-top: 20px;
    text-align: right;
  }

  .el-date-editor.el-input,
  .el-date-editor.el-input__inner {
    width: 100%;
  }

</style>
